Nuxt.js に vue-tsx-support を利用して tsx コンポーネントを突っ込む
https://gyazo.com/58bed13cab901995d4c6e3fdad4a4e07
Next.js でブログを作ろうとした で冒頭に書いた通り、Next.js で vue-tsx-support を用いて Next.js のために作ったコンポーネントを再利用しようと試みたのだが、下らないところで詰まって導入に数時間かかったので、知見として導入方法を書いておきたいと思う。今ももう覚えているか怪しいが…。 Nuxt.js + TypeScript プロジェクトを作ろう
npx create-nuxt-app <projectName> で生やせるのは皆さんご存知なので、これで適当に生やした後
yarn add @nuxt/typescript-runtime vue-tsx-support
yarn add -D @nuxt/typescript-build
nuxt.config.js -> nuxt.config.ts にして import { Configuration } from "@nuxt/types" の型をつける
src フォルダを作ってフォルダを全部その下に移動する
nuxt.config.ts に srcDir: './src' buildModules: ["@nuxt/typescript-build"]
これ重要で buildModules 書き忘れで数時間無駄にしました
src/types/shims ディレクトリ生やして shims-vue.d.ts 作ろう
Nuxt.js + TypeScript の導入マニュアルにも書いてあったはず
全部書いてあるんだが…
上見てください 何のためにここまで詳しく書いたんだよ
buildModules もちゃんと書いてあるじゃんというかなんかの拍子で消えたんだよな
build に parallel 設定追加したら一緒に消えた気がする
単純な範囲選択ミスです
vue-tsx-support を追加してみよう
src/types/shims に shims-tsx.d.ts jsx.d.ts の2ファイルを追加します
components に pages でも作って index.tsx 作る
適当に書いてみよう
code:index.tsx
import Vue, { CreateElement, VNode } from "vue"
import * as tsx from "vue-tsx-support"
export const Index = tsx.component({
name: "Index",
props: {},
render(): VNode {
return <div>This is tsx element</div>
},
})
pages/index.vue から呼んでみよう
code:index.vue
<template>
<div class="container">
<Index />
</div>
</template>
<script lang="ts">
import Vue from "vue"
import { Index } from "~/components/pages/index"
export default Vue.extend({
components: { Index },
})
</script>
これ lang="ts" 忘れて型補完効かないんだけど :anger: みたいなこともありがちなので
実際あった！ 感嘆符禁止週間
覚えてました。みんなもレッツ tsx in vue
tsx component のファイル開きながら yarn add したら TypeScript: Restart TS Server するまで型補完ブチ壊れることが多いよね
というか百発百中？
このメニューは .ts(x) ファイルでしか出ないはずなので .vue ファイルにいたら切り替えが必要になってだるい！ 感嘆符禁止